<!--  -->
<template>
  <div class="search-item">
    <div class="label" :title="search.name"> {{ search.name }}</div>
    <div class="input-content">
      <a-input
        size="large"
        v-if="search.type === 'input'"
        v-model="search.value"
        :placeholder="'请输入' + search.name"
        allow-clear
      />
      <a-select
        size="large"
        v-else-if="search.type === 'dropdown'"
        v-model="search.value"
        :placeholder="'请选择' + search.name"
        @change="onChange"
        allowClear
      >
        <a-select-option
          v-for="(option, index) in search.items"
          :value="option.value"
          :key="index"
        >
          {{ option.label }}
        </a-select-option>
      </a-select>
      <a-range-picker
        size="large"
        v-else-if="search.type === 'calendar'"
        v-model="search.value"
        :placeholder="['请选择' + search.name]"
        allow-clear
        format="YYYY年MM月DD日"
        @change="onChange"
      />
    </div>
  </div>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss' scoped>
@import "./_index.scss";
</style>